<script setup>
import { computed, watch, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import videos from '../data/videos'
import VideoPlayer from '@/components/VideoPlayer.vue'
import VideoInfo from '@/components/VideoInfo.vue'
import Recommendations from '@/components/Recommendations.vue'
import EmptyState from '@/components/EmptyState.vue'
import Comments from '@/components/Comments.vue'
import { getCurrentUser } from '@/utils/auth'
import { addHistory, isFavorite, toggleFavorite } from '@/utils/userdata'

const route = useRoute()
const router = useRouter()
const vid = computed(() => videos.find(v => String(v.id) === route.params.id))
const recommendations = computed(() => videos.filter(v => v.id !== vid.value?.id).slice(0, 8))
const isFavorited = ref(false)
const isLoading = ref(true)

const goBack = () => {
  if (window.history.length > 1) router.back()
  else router.push('/')
}

// 进入播放页后记录观看历史（登录状态下）
function logHistory() {
  const user = getCurrentUser()
  if (user && vid.value) addHistory(user.username, vid.value)
}

// 检查收藏状态
function checkFavorite() {
  const user = getCurrentUser()
  if (user && vid.value) {
    isFavorited.value = isFavorite(user.username, vid.value.id)
  }
}

// 收藏切换
function toggleFav() {
  const user = getCurrentUser()
  if (!user || !vid.value) return router.push('/login')
  toggleFavorite(user.username, vid.value)
  isFavorited.value = !isFavorited.value
}

// 视频加载完成
function handleVideoLoaded() {
  isLoading.value = false
}

// 监听用户登录状态变化
watch(() => getCurrentUser(), () => {
  checkFavorite()
}, { immediate: true })

watch(vid, () => {
  isLoading.value = true
  logHistory()
  checkFavorite()
}, { immediate: true })
</script>

<template>
  <section v-if="vid" class="fade-in">
    <div class="watch-top">
      <button class="back" @click="goBack">
        <span class="icon">←</span>
        <span>返回首页</span>
      </button>
    </div>
    
    <!-- 视频播放器组件 -->
    <VideoPlayer 
      :video-src="vid.src"
      :is-loading="isLoading"
      @loaded="handleVideoLoaded"
    />
    
    <!-- 视频信息组件 -->
    <VideoInfo 
      :video="vid"
      :is-favorited="isFavorited"
      @favorite-click="toggleFav"
    />

    <!-- 评论区 -->
    <div class="comments-section">
      <Comments :video-id="vid.id" />
    </div>

    <!-- 相关推荐 -->
    <Recommendations :videos="recommendations" />
  </section>

  <section v-else class="fade-in">
    <EmptyState 
      icon="⚠️"
      title="视频不存在或已被删除"
      :show-button="true"
      button-text="返回首页"
      @button-click="goBack"
    />
  </section>
</template>

<style scoped>
/* 基本样式重置和动画 */
.fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 顶部导航 */
.watch-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
}

.back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.back::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
  transition: left 0.5s ease;
  z-index: -1;
}

.back:hover::before {
  left: 100%;
}

.back:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  transform: translateY(-1px);
}

.back:active {
  transform: scale(0.98) translateY(-1px);
}

.back .icon {
  font-weight: bold;
  font-size: 1.1em;
}

/* 播放器容器 */
.player-container {
  margin-bottom: 24px;
  position: relative;
}

.player-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(99, 102, 241, 0.05);
  position: relative;
}

.player {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  transition: opacity 0.3s ease;
}

/* 加载动画 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 视频信息 */
.video-info {
  margin-bottom: 32px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.video-info:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(99, 102, 241, 0.3);
}

.title-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--fg);
  background: linear-gradient(135deg, var(--fg), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.fav:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.fav.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.fav.active:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.fav .icon {
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.fav:hover .icon {
  transform: scale(1.1);
}

/* 视频元数据 */
.video-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}

.stat-item .icon {
  opacity: 0.7;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 12px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.tag:hover {
  background: rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, 0.3);
}

.desc {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

/* 评论区 */
.comments-section {
  margin-bottom: 32px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}



/* 响应式设计 */
@media (max-width: 768px) {
  .title-line {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .title {
    font-size: 24px;
  }
  
  .fav {
    justify-content: center;
  }
  
  .video-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}
</style>